<template>
	<view v-if="Object.keys(detail).length > 0">
		<comHead  :datas="datasObj">
			<template #headerContent>
				<view class="pd-30" style="height: 402rpx;">
					<view class="info-box pd-20" style="height: 224rpx;">
						<view class="ft text_center">订单号：{{ detail.ordernum }}</view>
						<view class="c flex pd-20 mt-20">
							<view class="c-item">
								<view class="flex">
									<view class="status"></view>
									<view class="ft-22 c-33">应付款</view>
								</view>
								<view class="b mt-10 ft-num c-33 fw-900 ft-36">￥{{ detail.total_price }}</view>
							</view>
							<view class="line"></view>
							<view class="c-item">
								<view class="flex">
									<view class="status black"></view>
									<view class="ft-22 c-33">已付款</view>
								</view>
								<view class="b mt-10 ft-num c-33 fw-900 ft-36">￥{{ detail.pay_total_price }}</view>
							</view>
							<view class="line"></view>
							<view class="c-item">
								<view class="flex">
									<view class="status blue"></view>
									<view class="ft-22 c-33 nw">最近付款<template v-if="detail.near_pay_info">
											({{ detail.near_pay_info.examine_status }})</template></view>
								</view>
								<view class="b mt-10 ft-num c-33 fw-900 ft-36">
									￥{{ detail.near_pay_info ? detail.near_pay_info.price : '0.00' }}</view>
							</view>
						</view>
					</view>
					<!-- 暂不加滚动 -->
					<view class="tab-list mt-60" style="height: 58rpx;">
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
							<view class="flex">
								<view class="tab-item ft c-66 flex-center" :class="{ active: selectName === item.name }"
									v-for="(item, index) in tableList" :key="index"
									@click.stop="selectBtn(index, item)">
									{{ item.name }}
								</view>
							</view>

						</scroll-view>
					</view>
				</view>
			</template>
		</comHead>

		<view class="listBox">
			<view class="pay-list mt-10">
				<view class="pay-item mt-20 pd-20" v-for="(item, index) in payList" :key="index">
					<view class="status-box flex-bwt">
						<view class="status"
							:class="{ blue: item.pay_status == '待核销', black: item.pay_status == '已付款', gray: item.pay_status == '核销不成功' }">
							{{ item.pay_status }}
						</view>
						<image class="wh-30" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon9.png"
							@click="disabledCheck" v-if="item.pay_status == '待核销' || item.pay_status == '已付款'"></image>
						<image class="wh-30" src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png"
							@click="checkNode(item, index)" v-else-if="item.is_check != 1"></image>
						<image class="wh-30" src="https://cdn.oss.bon-top.cn/static_bc/images/check.png"
							@click="checkNode(item, index)" v-else-if="item.is_check == 1"></image>
					</view>
					<view class="main pd-20">
						<view class="flex-bwt">
							<view class="ft fw-800">{{ item.name }}</view>
							<view class="ft fw-800">￥{{ item.price }}</view>
						</view>
						<view class="mt-10 ft-24 c-99">{{ "付款节点:" + item.node + " | 付款时间:" + item.pay_time }}</view>
						<view class="line mt-20 mb-10"></view>
						<view class="flex-bwt mt-10 w-100" v-for="(v, k) in item.pay_list" :key="k">
							<view class="ft ml-40 c-99">{{ v.type_name }}</view>
							<view class="flex">
								<view class="ft c-99">{{ "￥" + v.old_price + "优惠后 |" }}</view>
								<view class="ft c-33 fw-800">{{ " ￥" + v.new_price }}</view>
							</view>
						</view>
					</view>
					<view class="p-info pd-20">
						<view class="flex-bwt">
							<view class="ft c-99">{{ item.pay_label }}</view>
							<view class="ft">{{ item?.pay_time_str || '-' }}</view>
						</view>
						<view class="flex-bwt mt-20">
							<view class="ft c-99">支付状态</view>
							<view class="ft">{{ item.pay_status }}<text class="c-bbq" v-if="item.reason"
									@click="showReasonContent(item.reason)"> (查看原因)</text></view>
						</view>
					</view>
					<view class="btn-list mt-40 flex-end">
						<view class="btn flex-center"
							@click="goPage('/subpackage/orderList/payDetail?order_id=' + orderId + '&pay_id=' + item.pay_id + '&id=' + item.id)">
							支付详情</view>
						<view class="btn flex-center active"
							v-if="item.pay_status == '待付款' || item.pay_status == '分期待付'" @click="toOnePay(item, index)">
							去支付
						</view>
						<!-- sub_id -->
						<view class="btn flex-center active"
							v-else-if="item.pay_status == '核销不成功' || item.pay_status == '待核销'"
							@click="goPage('/subpackage/joinGroup/cashRegister?order_id=' + orderId + '&sub_id=' + item.sub_id)">
							修改支付</view>
					</view>
				</view>
				<view class="com-empty" v-if="payList.length == 0">暂无数据</view>
			</view>

			<view class="submit flex-bwt pd-10" style="align-items: flex-start;"
				v-if="Object.keys(orderSettlementInfo).length > 0">
				<view class="flex" style="align-items: flex-end;">
					<view class="kind mt-20 ml-20" @click="openPay">
						<view class="kind-box">
							<image class="wh-40" src="https://cdn.oss.bon-top.cn/static_bc/images/kind.png"></image>
							<view class="num flex-center" v-if="orderSettlementInfo.check_num > 0">
								{{ orderSettlementInfo.check_num }}
							</view>
						</view>
						<text class="ft c-33 fw-800">支付项与减免</text>
					</view>
					<view class="jiaqia ml-12">
						<view class="ft-num ft-44 c-red" style="white-space: nowrap;"><text
								class="ft ft-22 c-red">￥</text>{{
									orderSettlementInfo.total_price }}<text class="ft ft-22 c-red">元</text></view>
					</view>
					<view style="flex: 1;"></view>
				</view>
				<view class="tijiao flex-center c-dbf ft" @click="subOrder">立即支付</view>
			</view>
			<view style="height: 266rpx;"></view>
		</view>
	</view>
	<up-popup :show="showReason" mode="bottom" round="14" @open="openReason">
		<view class="offers">
			<image class="popup-close wh-36" @click="closeReason"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">核销不成功原因</view>
			<view class="reason-content pd-20">
				<scroll-view scroll-y="true" class="scroll-Y-reason">
					<view v-html="reason"></view>
				</scroll-view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn c-dbf flex-center ft" @click="showReason = false">确定</view>
			</view>
		</view>
	</up-popup>
	<up-popup :show="showPay" mode="bottom" round="14" @open="openPay">
		<view class="offers">
			<image class="popup-close wh-36" @click="closePay"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">已选支付项目</view>
			<view class="pay-list-box mt-20">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="m pd-20">
						<view class="title">支付款项</view>
						<view class="comboItem mt-20 pd-20" v-for="(item, index) in payNodeList" :key="item.index">
							<view class="flex-bwt">
								<view class="flex" @click="checkPayNode(item, index)">
									<image class="mr-10" style="width: 30rpx;height: 30rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/reduce.png"></image>
									<view class="ft c-33 fw-800">{{ item.name }}</view>
								</view>
								<view class="flex">
									<text class="ft c-33 fw-800">{{ "￥" + item.price }}</text>
									<image v-if="item.isOpen == 1" @click="item.isOpen = item.isOpen == 1 ? 0 : 1"
										class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png">
									</image>
									<image v-else @click="item.isOpen = item.isOpen == 1 ? 0 : 1" class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
								</view>
							</view>
							<view class="ml-40 mt-10 ft c-99">
								{{ "付款节点:" + item.node + " | 付款时间:" + item.pay_time }}
							</view>
							<view v-if="item.isOpen == 1">
								<view class="line1 ml-40 mt-20"></view>
								<view class="flex-bwt mt-10 w-100" v-for="(v, k) in item.pay_list" :key="k">
									<view class="ft ml-40 c-99">{{ v.name }}</view>
									<view class="flex">
										<view class="ft c-99">{{ "￥" + v.old_price + "优惠后 |" }}</view>
										<view class="ft c-33 fw-800">{{ " ￥" + v.new_price }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="m pd-20 mt-20">
						<view class="title">可减免项目</view>

						<view class="comboItem mt-20 pd-20" v-if="detail.is_can_use_group == 1 && delGroup == 0">
							<view class="flex-bwt">
								<view class="flex" @click="delGroupHandle">
									<image class="mr-10" style="width: 30rpx;height: 30rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/reduce.png"></image>
									<view class="ft c-33 fw-800">拼团立减</view>
								</view>
								<view class="flex">
									<text class="ft c-33 fw-800">{{ "-￥" + detail.group_reduce_price }}</text>
									<image v-if="openGroupDes == 1" @click="openGroupDes = openGroupDes == 1 ? 0 : 1"
										class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png">
									</image>
									<image v-else @click="openGroupDes = openGroupDes == 1 ? 0 : 1" class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
								</view>
							</view>
							<view class="ml-40 mt-10 ft c-99" v-if="openGroupDes == 1">{{ detail.group_reduce_price_txt
							}}
							</view>
						</view>

						<view class="comboItem mt-20 pd-20" v-if="detail.is_can_use_newcomer == 1 && delNewcomer == 0">
							<view class="flex-bwt">
								<view class="flex" @click="delNewcomerHandle">
									<image class="mr-10" style="width: 30rpx;height: 30rpx;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/reduce.png"></image>
									<view class="ft c-33 fw-800">新人立减</view>
								</view>
								<view class="flex">
									<text class="ft c-33 fw-800">{{ "-￥" + detail.newcomer_reduce_price }}</text>
									<image v-if="openNewcomerDes == 1"
										@click="openNewcomerDes = openNewcomerDes == 1 ? 0 : 1" class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png">
									</image>
									<image v-else @click="openNewcomerDes = openNewcomerDes == 1 ? 0 : 1"
										class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
								</view>
							</view>
							<view class="ml-40 mt-10 ft c-99" v-if="openNewcomerDes == 1">
								{{ detail.newcomer_reduce_price_txt }}
							</view>
						</view>

						<template v-if="detail.is_can_use_share == 1 && detail.share_reduce_list.length > 0">
							<!-- share_reduce_price_exchange -->
							<view class="flex-bwt mt-20" @click="goReduction"
								v-if="detail.share_reduce_list.length > 0">
								<view style="width: 180rpx" class="flex ft c-99">
									{{ "分享减免" }}
									<image class="wh-24 ml-8"
										src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png"></image>
								</view>
								<view class="flex">
									<text class="ft c-red" v-if="reduce_id > 0">{{ "-￥" + reducePrice }}</text>
									<view class="you ft flex-center" v-else>
										{{ "￥" + detail.share_reduce_price_exchange_show + "可用" }}
									</view>
									<image class="ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"
										style="width: 20rpx;height: 34rpx;">
									</image>
								</view>
							</view>
						</template>
						<!-- {{ detail.can_use_integral }} -->
						<view class="flex-bwt mt-20" @click="goDeduction" v-if="detail.is_can_use_integral">
							<view style="width: 180rpx" class="ft c-99"> {{ "积分抵扣" }}</view>
							<view class="flex">
								<view class="ft c-red" v-if="integral_show">
									{{ "-￥" + integral_show }}</view>
								<view class="you ft flex-center" v-else>{{ detail.can_use_integral +
									"积分可用"
								}}</view>
								<image class="ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"
									style="width: 20rpx;height: 34rpx;">
								</image>
							</view>
						</view>

					</view>
				</scroll-view>
			</view>
			<view class="submit flex-bwt pd-10">
				<view class="flex">
					<!-- <view class="kind mt-20 ml-20" @click="openPay">
						<view class="kind-box">
							<image class="wh-40" src="https://cdn.oss.bon-top.cn/static_bc/images/kind.png"></image>
							<view class="num flex-center" v-if="orderSettlementInfo.check_num > 0">
								{{ orderSettlementInfo.check_num }}
							</view>
						</view>
						<text class="ft c-33 fw-800">支付项与减免</text>
					</view> -->
					<view class="jiaqia ml-12">
						<view class="ft-num ft-44 c-red" style="white-space: nowrap;">
							<text class="ft ft-22 c-red">￥</text>
							{{ orderSettlementInfo.total_price }}
							<text class="ft ft-22 c-red">元</text>
						</view>
					</view>
					<view style="flex: 1;"></view>
				</view>
				<view class="tijiao flex-center c-dbf ft" @click="subOrder">立即支付</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup lang="js">
import {
	reactive,
	ref
} from 'vue';
import dialogPop from '@/components/dialogPop.vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLoad
} from "@dcloudio/uni-app";

import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '支付列表',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	height: 240
})

const tableList = ref([

	{
		name: '待支付',
	},
	{
		name: '待核销',
	},
	{
		name: '已付款',
	},
	{
		name: '分期待付',
	},
	{
		name: '核销不成功',
	}
])
const integral = ref(0)
const integral_show = ref(0)
const goDeduction = () => {
	uni.navigateTo({
		url: "/subpackage/joinGroup/deduction",
		events: {
			// 监听子页面事件
			fromDetail: (data) => {
				console.log('data', data)
				integral.value = data.integral
				integral_show.value = data.integral > 0 ? parseFloat(data.integral / detail.value.integral_exchange_rule) : ''

				getSettlementInfo()
			}
		},
		success: (res) => {
			// 向子页面传递数据
			console.log('detail', detail.value)
			res.eventChannel.emit('toDetail', {
				integral: detail.value.can_use_integral,
				can_use_integral_show: detail.value.can_use_integral_show,
				integral_exchange_rule: detail.value.integral_exchange_rule
			});
		}
	});
}

const selectName = ref('')
const selectBtn = async (idx, item) => {
	selectName.value = selectName.value == item.name ? '' : item.name

	reloadData()
}

const payList = ref([])
const reloadData = () => {
	utils
		.request(
			api.getOrderPayList, {
			id: orderId.value,
			status: selectName.value
		},
			"get"
		)
		.then((res) => {
			if (Object.keys(detail.value).length == 0) {
				detail.value = res.data
			}
			payList.value = res.data.list
			payList.value.forEach(f => {
				if (check_ids.value.includes(f.id)) f.is_check = 1
			})
		});
}

const detail = ref({})
const orderId = ref('')
onLoad((options) => {
	orderId.value = options?.order_id || ''
	reloadData()
})

const disabledCheck = () => {
	uni.showToast({
		title: '无法添加',
		icon: 'none',
	});
}

const reason = ref('')
const showReasonContent = (val) => {
	reason.value = val
	showReason.value = true
}

const showReason = ref(false);
const closeReason = () => {
	showReason.value = false
}
const openReason = () => {
	showReason.value = true
}

// 跳转
const goPage = (url) => {
	uni.navigateTo({
		url: url,
	});
}

const orderSettlementInfo = ref({})
const getSettlementInfo = () => {
	utils
		.request(
			api.payListSettlement, {
			id: orderId.value,
			check_ids: check_ids.value,
			reduce_id: reduce_id.value,
			is_use_group: detail.value.is_can_use_group == 1 && delGroup.value == 0 ? 1 : 0,
			is_use_newcomer: detail.value.is_can_use_newcomer == 1 && delNewcomer.value == 0 ? 1 : 0,
			integral: integral.value

		},
			"post"
		)
		.then((res) => {
			orderSettlementInfo.value = res.data
		});
}

const subOrder = () => {
	utils
		.request(
			api.payListSettlement, {
			id: orderId.value,
			check_ids: check_ids.value,
			reduce_id: reduce_id.value,
			is_use_group: detail.value.is_can_use_group == 1 && delGroup.value == 0 ? 1 : 0,
			is_use_newcomer: detail.value.is_can_use_newcomer == 1 && delNewcomer.value == 0 ? 1 : 0,
			integral: integral.value,
			is_sub: 1
		},
			"post"
		)
		.then((res) => {
			if (res.data.is_pay > 0) {
				//跳转到已支付页面
				uni.redirectTo({
					url: "/subpackage/joinGroup/waitPay?id=" + orderId.value
				});
			} else if (res.data.is_pay == 0) {
				//跳转到支付页面
				uni.redirectTo({
					url: "/subpackage/joinGroup/cashRegister?order_id=" + orderId.value
				});
			}
		});
}

const check_ids = ref([])
const checkNode = (item, index) => {
	if (item.is_check == 1) {
		payList.value[index].is_check = 0
		check_ids.value = check_ids.value.filter((v) => {
			return v != item.id
		})
	} else {
		if (!check_ids.value.includes(item.id)) check_ids.value.push(item.id)
		payList.value[index].is_check = 1
	}

	getSettlementInfo()
}

const checkPayNode = (item, index) => {

	getSettlementInfo()
}

const showPay = ref(false);
const closePay = () => {
	showPay.value = false
}
const payNodeList = ref([])
const openPay = () => {
	showPay.value = true
	payNodeList.value = payList.value.filter((item) => {
		return item.is_check == 1
	})
}

const delGroup = ref(0)
const openGroupDes = ref(0)
const delGroupHandle = ()=>{
	delGroup.value = 1
	getSettlementInfo()
}

const delNewcomer = ref(0)
const openNewcomerDes = ref(0)
const delNewcomerHandle = ()=>{
	delNewcomer.value = 1
	getSettlementInfo()
}

const reduce_id = ref("")
const reducePrice = ref("")
const goReduction = () => {
	uni.navigateTo({
		url: "/subpackage/joinGroup/reduction",
		events: {
			// 监听子页面事件
			fromDetail: (data) => {
				reduce_id.value = data.reduce_id
				if (Object.keys(data.checkReduceData).length > 0) {
					reducePrice.value = data.checkReduceData.reduce
				}
				getSettlementInfo()
			}
		},
		success: (res) => {
			// 向子页面传递数据
			res.eventChannel.emit('toDetail', {
				share_reduce_list: detail.value.share_reduce_list
			});
		}
	});
}


const toOnePay = (item, index) => {
	check_ids.value = [];
	payList.value.map((v, k) => {
		payList.value[k].is_check = k == index ? 1 : 0
	})
	check_ids.value.push(item.id)
	openPay()
	getSettlementInfo()
}
</script>

<style lang="scss" scoped>
.listBox {
	width: 100vw;
	padding: 0 30rpx 30rpx;
	box-sizing: border-box;
}

.info-box {
	width: 690rpx;
	background: #F8F8F8;
	border-radius: 40rpx;

	.c {
		width: 650rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 20rpx;

		.c-item {
			width: 166rpx;

			.status {
				margin-right: 4rpx;
				width: 10rpx;
				height: 30rpx;
				background: #DBF046;
				border-radius: 6rpx;
				flex-shrink: 0;
			}

			.status.black {
				background-color: #333333;
			}

			.status.blue {
				background-color: #1F18EE;
			}

			.nw {
				white-space: nowrap;
				width: 100px;
			}

			.b {
				white-space: nowrap;
			}
		}

		.line {
			margin-left: 20rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
			width: 2rpx;
			height: 82rpx;
			background-color: #F1F1F1;
		}
	}
}

.tab-list {
	.tab-item {
		flex-shrink: 0;
		background: #FFFFFF;
		border-radius: 34rpx;
		border: 2rpx solid #F1F1F1;
		padding: 12rpx 20rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.tab-item.active {
		border: none;
		background: #333333;
		border: 2rpx solid #333;
		color: #FFFFFF;
	}

	.tab-item:last-child {
		margin-right: 0;
	}
}

.pay-list {
	.pay-item {
		position: relative;
		width: 690rpx;
		background: #F8F8F8;
		border-radius: 40rpx;

		.wh-30 {
			margin-top: -12rpx;
		}

		.status {
			padding: 10rpx 20rpx 0;
			height: 74rpx;
			background: #DBF046;
			font-size: 24rpx;
			color: #333333;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			box-sizing: border-box;
		}

		.status.blue {
			background: #1F18EE;
			color: #FFFFFF;
		}

		.status.black {
			background: #333333;
			color: #FFFFFF;
		}

		.status.gray {
			background: #D1D1D1;
			color: #FFFFFF;
		}

		.main {
			position: relative;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: -20rpx;
			z-index: 2;
		}

		.line {
			height: 2rpx;
			width: 100%;
			background: #F1F1F1;
		}

		.p-info {
			width: 650rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
			border-radius: 20rpx;
		}

		.btn {
			width: 136rpx;
			height: 58rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #333333;
		}

		.btn.active {
			width: 136rpx;
			height: 58rpx;
			background: #333333;
			border-radius: 20rpx;
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #DBF046;
		}
	}
}

.bottomBtn {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 20rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 448rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.offers {
	height: 70vh;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	//border: 2rpx solid red;
	position: relative;
	padding: 40rpx;
	padding-bottom: calc(118rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
	width: 100vw;

	.popup-close {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}

	.reason-content {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		height: calc(100% - 128rpx + env(safe-area-inset-bottom));
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.scroll-Y-reason {
		height: 100%;
	}

	.pay-list-box {
		height: calc(70vh - 84rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			height: 100%;
		}

		.m {
			width: 670rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			font-weight: 800;
			font-size: 28rpx;
			color: #333333;

			.comboItem {
				background: #F8F8F8;
				border-radius: 20rpx;
			}
		}
	}
}

.you {
	width: 208rpx;
	height: 50rpx;
	background: #fff3ec;
	border-radius: 34rpx 34rpx 34rpx 34rpx;
	color: #ff0000;
}

.submit {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 10rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.kind {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 78rpx;
		padding-right: 20rpx;
		border-right: 2rpx solid #F1F1F1;
		flex-shrink: 0;

		.kind-box {
			position: relative;

			.num {
				position: absolute;
				top: -16rpx;
				right: -16rpx;
				width: 32rpx;
				height: 32rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				background: #FF0000;
				border-radius: 50%;
			}
		}
	}

	.minxi {
		width: 170rpx;
		height: 50rpx;
		background: #F1F1F1;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}

	.tijiao {
		width: 192rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}
</style>